<template>
<!--  联动数据集-->
  <div id="share-dataset" style="height: 400px; width: 100%"></div>
</template>

<script>
export default {
  name: "ShareDataset",
  data() {
    return {
      weekTime: '周日',
      weekNum: 0
    }
  },
  methods: {
    myShareChat() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('share-dataset'))
      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      // 指定图表的配置项和数据
      let option = {
        legend: {
          textStyle: {
            color: '#FFF'
          }
        },
        darkMode: true,
        color: ['#4992ff', '#7cffb2', '#fddd60', '#ff6e76', '#58d9f9', '#05c091', '#ff8a45', '#8d48e3', '#dd79ff'],
        textStyle: {
          color: '#FFF'
        },
        tooltip: {
          trigger: 'axis',
          showContent: false
        },
        dataset: {
          source: [
            ['product', '周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            ['休眠中', 56.5, 72.1, 88.7, 70.1, 53.4, 85.1, 68.7],
            ['正常', 51.1, 41.4, 55.1, 53.3, 73.8, 68.7, 85.1],
            ['警告', 40.1, 32.2, 69.5, 36.4, 45.2, 32.5, 30.1],
            ['异常错误', 25.2, 17.1, 41.2, 18, 33.9, 49.1, 10]
          ]
        },
        xAxis: {type: 'category'},
        yAxis: {gridIndex: 0},
        grid: {top: '55%'},
        series: [
          {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
          {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
          {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
          {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
          {
            type: 'pie',
            id: 'pie',
            radius: '30%',
            center: ['50%', '25%'],
            emphasis: {focus: 'data'},
            label: {
              color: '#FFF',
              formatter: '{b}: {@'+ this.weekTime.split(',')[0] +'} ({d}%)'
            },
            encode: {
              itemName: 'product',
              value: this.weekTime,
              tooltip: this.weekTime
            }
          }
        ]
      }

      myChart.on('updateAxisPointer', function (event) {
        let xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          let dimension = xAxisInfo.value + 1;
          myChart.setOption({
            series: {
              id: 'pie',
              label: {
                formatter: '{b}: {@[' + dimension + ']} ({d}%)'
              },
              encode: {
                value: dimension,
                tooltip: dimension
              }
            }
          });
        }
      });

      myChart.setOption(option)
    },

    // 获取当前星期日期
    getWeekDate() {
      this.weekNum = new Date().getDay()
      this.weekTime = '周' + '日一二三四五六'.charAt(this.weekNum)
    }
  },
  // mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作。
  // 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了
  mounted() {
    this.getWeekDate()
    this.myShareChat()
  }
}
</script>

<style scoped>

</style>